<template>
  <div class="step-one">
    <div class="notice-box">
      <div class="notice-title">科目{{types==1?'一':'四'}}考试</div>
      <div class="notice-detail">
        <div class="notice-text">
          <div>考试须知</div>
          <div>
            1.遵守考察纪律，服从监考人员指挥。<br />
            2.进入考察、手机关机。禁止抽烟，禁止吃零食。<br />
            3.未经工作人员允许，考试禁止随意出入考场。<br />
            4.考察内禁止大声喧哗，禁止随意走动。<br />
            5.考试中认真答题，不准交头接耳。<br />
            6.考试中不准冒名顶替，不准弄虚作假。<br />
            7.注意考场卫生，禁止随地吐痰，禁止乱扔纸屑。
          </div>
        </div>
        <div class="room-info">
          <div class="room-title">理论考试{{examAddress}}号考台</div>
          <div class="users-info">
            <div>身份证：522627XXXXXXXXXXXX</div>
            <div>考试姓名：{{userInfo.nickname}}</div>
          </div>
          <div class="users-info">点击“确定考试”按钮 开始考试</div>
          <div class="tips">
            操作提示：每题考试答案确 定后，点击【下一题】，电
            脑立即判定所选答案，如选 择错误，系统将提示正确答
            案，提示后不允许修改答
          </div>
          <div class="confirm" @click="changeSteps">
            <div>确认考试</div>
          </div>
        </div>
      </div>
    </div>
    <div class="popups-box" v-if="tipsShow">
      <div class="popups-body">
        <div class="tips-text">
          <img src="@/assets/ts.png" alt="" />
          <div class="text">新人免费试用5次，超过5次后自动锁定</div>
          <div class="num">
            剩余<span>{{ buyInfo.tryNum }}</span
            >次
          </div>
        </div>
        <div class="btn-box">
          <div @click="goOnExam">继续考试</div>
          <div class="green">购买课程</div>
        </div>
        <img
          class="exit-btn"
          src="@/assets/EXIT.png"
          alt=""
          @click="tipsShow = false"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['examAddress','buyInfo'],
  data() {
    return {
      tipsShow: false,
      userInfo:{},
      types:1
    };
  },
  mounted(){
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    this.types = this.$route.query.type
  },
  methods: {
    // 传递给父组件的步骤数，告诉父组件需要进行下一步了
    changeSteps() {
      // 如果未购买课程，每次弹窗提示
      console.log(this.buyInfo, "buyInfo");
      if (!this.buyInfo.isBuy) {
        this.tipsShow = true;
        return;
      }
      this.$emit("getSteps", 2);
    },
    goOnExam() {
      this.tipsShow = false;
      this.$emit("getSteps", 2);
      // 继续考试后，试用次数调取接口-1
    },
  },
};
</script>

<style lang="scss" scoped>
.notice-box {
  margin-top: 3vh;
  .notice-title {
    text-align: center;
    font-size: 1.2vw;
    font-weight: bold;
    margin-bottom: 3vh;
  }

  .notice-detail {
    border: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 2.5;
    letter-spacing: 1px;
    border-radius: 10px;
    font-size: 0.9vw;

    .notice-text {
      flex: 1;
      padding: 2.5vh 1vw;
      border-right: 1px solid #e6e6e6;

      > div:nth-child(1) {
        font-size: 1vw;
      }
    }

    .room-info {
      padding: 2.5vh 1vw;
      flex: 1;

      .room-title {
        font-size: 1vw;
      }

      .users-info {
        display: flex;
        color: #2ac092;
        div {
          margin-right: 0.5vw;
        }
      }

      .confirm {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 5vh;
        color: #fff;
        cursor: pointer;
        user-select: none;
        font-size: 1.1vw;
        div {
          padding: 0 5vw;
          border-radius: 30px;
          background-color: #2ac092;
          width: max-content;
        }
      }
    }
  }
}

.popups-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2086;
  background-color: rgba(127, 127, 127, 0.6);

  .popups-body {
    width: 20vw;
    height: 25vh;
    background-color: #fff;
    border-radius: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .tips-text {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      color: #333333;
      font-size: 0.9vw;

      img {
        width: 2.2vw;
        height: 4.5vh;
      }
      .num {
        > span {
          font-size: 1.2vw;
          color: #2ac092;
        }
      }
    }

    .btn-box {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-around;
      color: #666666;
      > div {
        cursor: pointer;
        height: 100%;
        border: 0.5px solid #e6e6e6;
        flex: 1;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .green {
        color: #2ac092;
      }
    }

    .exit-btn {
      position: absolute;
      cursor: pointer;
      top: 2vh;
      right: 1vw;
      width: 1.2vw;
      height: 2.5vh;
    }
  }
}
</style>